<template>
	<div class="rx-datepicker">
    <!-- 选择月份年份 -->
    <!-- <year v-if="active==='year'"/>
    <month v-if="active==='month'"></month> -->
    <div class="topbar">
      <span class="icon-prever" @click="onYearChange(-1)">
        <rx-icon name="rx-bbefore"/>
      </span>
      <span class="icon-prev" @click="onMonthChange(-1)">
        <rx-icon name="rx-before"/>
      </span>
      <span class="value">
        <span class="value-year">{{curValue.getFullYear()}}年</span>
        <span class="value-month">{{curValue.getMonth()+1}}月</span>
      </span>
      <span class="icon-nexter" @click="onYearChange(1)">
        <rx-icon name="rx-nnext"/>
      </span>
      <span class="icon-next"  @click="onMonthChange(1)">
        <rx-icon name="rx-next"/>
      </span>
    </div>
    <day :date="curValue" :choosed="value" @pick="onPick"></day>
		<!-- <div class="rx-datepicker-bottombar" > -->
				<!-- <a class="btn btn-blue pointer" @click="getToday">今天</a> -->
		<!-- </div> -->
	</div>
</template>
<script>
import day from './day.vue';
import date from './month.vue';
import year from './year.vue';
//选择日期
export default {
  name: 'rx-datepicker',
  props: {
    value: {
      type:Date
    },
    type: {
      type: String,
      default() {
        return ['day', 'week', 'month','year'][0];
      }
    },
    min:{
      type:Date
    },
    max:{
      type:Date
    }
  },
  data() {
    var today = new Date();
    return {
      //当前选中的日期
      curValue:this.value||new Date(),
      //当前是选啥
      active:'date'
    };
  },
  methods: {
    onYearChange(step){
      this.curValue=new Date(this.curValue.getFullYear()+step,this.curValue.getMonth(),this.curValue.getDate())
    },
    onMonthChange(step){
      this.curValue=new Date(this.curValue.getFullYear(),this.curValue.getMonth()+step,this.curValue.getDate())
    },
    onPick(date){
      this.$emit('pick',date)
      this.$emit('resolve',date)
    }
  },
  components: {
    year,
    date,
    day
  }
};
</script>
<style lang="scss">
.rx-datepicker {
  // width: 230px;
  display: inline-block;
  overflow: hidden;
  /* border: 1px solid #D7DCE6; */
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  border-radius: 4px;

  .topbar{
    border-bottom: 1px solid #d7dce6;
    padding: 10px;
    text-align: center;

    .icon-prever,
    .icon-prev,
    .icon-next,
    .icon-nexter{
      border: 1px solid #C8CDD9;
      border-radius: 4px;
      color: #999999;
      display: inline-block;
      background: #fff;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      margin: 0 2px;
      vertical-align: middle;
      user-select: none;
      cursor: pointer;

      &:hover{
        border-color: #326bef;
        color: #326bef;
      }
    }
    .icon-prever,
    .icon-prev{
      float: left;
    }
    .icon-next,
    .icon-nexter{
      float: right;
    }
    .value{
      line-height: 20px;
    }
  }
}
.rx-datepicker-topbar {
  border-bottom: 1px solid #d7dce6;
  padding: 10px;

  .topbar-btn {
    border: 1px solid #C8CDD9;
    border-radius: 4px;
    color: #999999;
    display: inline-block;
    background: #fff;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    margin: 0 2px;
    vertical-align: middle;
    user-select: none;
  }
  .topbar-info {
    display: inline-block;
    width: 98px;
    text-align: center;
    line-height: 24px;
    height: 24px;
    vertical-align: middle;
  }
  .topbar-info__year,
  .topbar-info__month {
    cursor: pointer;
  }
}
.rx-datepicker-bottombar{
  height: 10px;
}
</style>

